<template>
	<view>
		<view class="cu-custom" :style="[{height:setting.CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="headerStyle"
				:class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="handleBackPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content text-size-32" :style="[{top:setting.StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		}, isDiy: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		}
	})
	const headerStyle = computed(() => {
		var StatusBar = setting.StatusBar;
		var CustomBar = setting.CustomBar;
		var bgImage = props.bgImage;
		var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
		if (props.bgImage) {
			style = `${style}background-image:url(${bgImage});`;
		}
		return style;
	})
	const handleBackPage = (res) => {
		if (props.isDiy) {
			emit('action')
		} else {
			uni.navigateBack({
				delta: 1
			});
		}
	}
</script>

<style>

</style>